<template>
  <div>
<!--<el-drawer-->
<!--              title="智心内部工作群"-->
<!--              :append-to-body="true"-->
<!--              :before-close="drawer_cose"-->
<!--              :visible.sync="chat_drawer">-->

            <div style="width:1800px;
                background-color: #8cd8da;
              height:500px;
              /*opacity: 0.2;*/
              /*overflow-y:scroll;*/
              /*float:right;*/
              border: 3px solid #d54444;
              box-shadow: 0 2px 4px rgba(0, 0, 0, .12),
              0 0 6px rgba(0, 0, 0, .04);scrollbar-base-color:#ff6600;" >
              <div v-for="i in mesg_list" style="margin-bottom: 50px">
                <div>
                </div>

                <p style="position:relative;"><img :src=squareUrl alt=""
                                                   style="width: 40px; height: 40px;position:absolute;">
                  <span v-if="i.user.id===user.id"
                        style="color: #409EFF; font-size: 10px; padding-left: 10px;margin-left: 40px">{{
                      i.user.name
                    }}</span>
                  <!--                  <p v-if="i.user.id===user.id" style="color: #409EFF; font-size: 10px ">{{ i.user.name }}</p>-->
                  <span v-else style="color: #909399; font-size: 10px; padding-left: 10px;margin-left: 40px">{{
                      i.user.name
                    }}</span>
                  <!--                  <p v-else style="color: #909399; font-size: 10px ">{{ i.user.name }}:</p>-->
                  <span style="padding-left: 10px;"> {{ i.add_time }}</span>
                </p>

                <p style="font-family: 'Andale Mono'; font-size: 25px;font-size: large;padding-left: 50px;padding-top: 20px">
                  {{ i.mesg }}</p>
                <br>
                <!--                  <p style="font-family: 'Andale Mono'; font-size: 25px;font-size: large">__</p>-->
              </div>
            </div>

            <div style="float:right;">

            </div>
            <div>
              <!--                <el-divider content-position="right">智心</el-divider>-->
              <el-input
                  type="textarea"
                  :autosize="{ minRows: 3, maxRows: 7}"
                  placeholder="...."
                  style="font-size: 19px"
                  v-model="input_message">
              </el-input>
            </div>

            <el-button type="danger" style=": true; float:right " @click="Toindex">返回首页</el-button>
            <el-button type="success" style=": true; float:right " @click="send_message">发送</el-button>

<!--          </el-drawer>-->
  </div>
</template>

<script>
import {sendWebsocket, closeWebsocket} from '@/utils/websocket.js'
var ws = new WebSocket('ws://127.0.0.1:8000/room/111/');


ws.onmessage = function (obj) {
  var obj = JSON.parse(obj.data);

  console.log(obj.mesg)
  // var obj_mesg_list= window.Vue.mesg_list
  console.log(obj)
  window.Vue.mesg_list.push(obj)
  window.Vue.mesg_number += 1
  }

export default {
  name: "WeiChatView",
  data() {
    return {
           chat_drawer: false,
      user: {icon: ''},
      user_type: '',
      dialogVisible: false,
      squareUrl: "",
      srcList: [],
      drawer: false,
      imageUrl: "",
      input_message: '',
      mesg_list: [],
      other_user: {},
      mesg_number: '',
      config: {
        img: 'http://127.0.0.1:8000/media/icon/chat.png',
        name: '智心医疗',
        // dept: '白衣天使',
        callback: this.bindCover
      },

    }
  },
  created() {
    this.user = this.$getSessionStorage("user");
    this.user_type = this.$getSessionStorage("user_type");
    // this.selectAvatarlink();
    this.squareUrl = this.$getSessionStorage('icon')
    this.messages();
  },
  mounted() {
    window.Vue = this;
  },
  Websocket() {
    this.ws = new WebSocket('ws://127.0.0.1:8000/chat/');
    this.ws.onmessage(obj => {
      var obj = JSON.parse(obj.data);
      console.log(obj.mesg)
      // var obj_mesg_list= window.Vue.mesg_list
      console.log(obj)
      window.Vue.mesg_list.push(obj)
      window.Vue.mesg_number += 1
    })
  },

  beforeDestroy() {
    // 页面销毁时关闭ws。因为有可能ws连接接收数据尚未完成，用户就跳转了页面
    // 在需要主动关闭ws的地方都可以调用该方法
    closeWebsocket()
  },
  methods: {
    Toindex(){
      this.$router.push({
              path: "/",
            });
      },

    messages() {
      this.$axios
          .get(this.$settings.BASE_URL + 'weichat/messagevue/message/')
          .then((Response) => {
            if (Response.data.code === 100) {
              let l1 = Response.data.data
              console.log(l1)
              for (let i in l1) {
                console.log(i)
                let k = JSON.parse(l1[i]);
                console.log(k)
                this.mesg_list.push(k)
                var number = localStorage.getItem('mesg_number')
                console.log(`消息数量${number}`)
                if (number !== this.mesg_list.length) {
                  this.mesg_number = this.mesg_list.length
                }

              }
            } else {
              alert('聊天记录加载失败')
            }
          })
    },
    drawer_cose() {
      this.mesg_number = ''
      this.chat_drawer = false
      localStorage.setItem('mesg_number', this.mesg_number)
    },

    send_message() {
      var add_time = new Date().toLocaleTimeString()
      let messsage = {user: this.user, mesg: this.input_message, add_time: add_time}
      messsage = JSON.stringify(messsage)
      ws.send(messsage)
      this.input_message = ''

    },
  }

}


</script>

<style scoped>
.message {
height: 300px;
border: 1px solid #dddddd;
width: 100%;}
</style>



.el-icon-cloudy {
  text-align: center;
  line-height: 60px;
  font-size: 20px;
}

.el-header,
.el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;

  display: flex;
  flex-direction: column;
  flex: 1;
}

.el-aside {
  background-color: #545c64;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #FFF;
  color: #333;
  /* text-align: center; */
  line-height: 0px;
}

.account:hover {
  color: #FFF;
  text-decoration: none;
  cursor: pointer;
}

.account:active {
  color: rgb(119, 255, 255);
  text-decoration: rgb(119, 255, 255);
  cursor: pointer;
}

.el-header[data-v-23543608],
.el-footer[data-v-23543608] {
  background-color: #909399;
  color: #333;
  text-align: center;
  line-height: 60px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.avatar {
  position: absolute;
  left: 1650px;
  margin-top: -58px;
}

.v-step-0 {
  position: absolute;
  left: 1650px;
  margin-top: -58px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatarUpdate {
  width: 178px;
  height: 178px;
  display: block;
}

.elbtn {
  position: absolute;
  left: 1500px;
  top: 7px;
}